@import '../../vendor/func';

#canvas {
    @mixin background-retina ./images/canvas, webp, 2048px, 450px;
    background-position: top center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 3px 2px -2px rgba(200, 200, 200, .2);
    height: 450px;
    overflow: visible;
    padding-top: 55px;
}

div.or {
    height: 4.4em!important;
}

#channel {
    margin-top: 20px;
}
#channel2 {
    margin-top: 60px;
}

#video_circle {
    width: 300px;
    height: 300px;
    background: url(./images/circle.svg) no-repeat;
    & .video_button {
        display: block;
        margin: 50px;
        width: 200px;
        height: 200px;
        border: 2px solid rgba(0, 0, 0, 0.1);
        border-radius: 100px;

        background-image: url(./images/play.svg),url(./images/video-btn.jpg);
        @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            & {
                background-image: url(./images/play.svg), url(./images/video-btn_@2x.jpg);
            }
        }
        background-size: auto auto, 200px, 200px;
        background-position: center center;
        background-repeat: no-repeat;
    }
}

#show {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: -140px auto 0;
    & .item {
        background: #eee;
        height: 280px;
        margin: 15px;
        width: 280px;
    }
}

#statistic {
    background-color: #efefef;
    margin: 50px 0;
    padding: 30px 0;
    & .statistic {
        margin-bottom: 0;
        i {font-size: 38px;}
    }
    & .button {
        margin-top: 60px;
    }
}

#discussion {
    margin-top: 50px;
}

ul.quotes {
    margin: 0;
    padding: 0 20px 0;
    list-style: none;
    & li {
        margin: 0px 0 50px 20px;
        & .quote {
            display: inline;
            font-size: 16px;
            font-style: italic;
            position: relative;
            &:before {
                color: #ddd;
                content: "\201C";
                display: block;
                font-family: "Georgia";
                font-size: 60px;
                left: -45px;
                padding-left: 10px;
                position: absolute;
                top: 16px;
            }
        }
        & .source {
            color: #888;
            display: inline-block;
            float: right;
            font-size: 14px;
            margin-top: 10px;
            text-align: right;
            &:before {
                color: #888;
                content: "\2014 \2009";
            }
        }
    }
}
